<template>
  <div>
    <public-head :title="title" :path="path" />
    <div class="wrap">
      <!-- 选择框 -->
      <div class="chooseBox">
        <div class="chooseLine">
          <van-cell title="全部线路" is-link />
        </div>

        <div class="chooseDate">
          <van-cell title="2021-05-20" is-link />
        </div>
      </div>

      <!-- 环形饼图 -->
      <div class="pieChart">
        <div class="pieChartInfo">
          <div class="pieChartInfoLeft">
            运营兑换率:
            <span>{{ pieChartPercent.duihuanlv }}</span>
          </div>
          <div class="pieChartInfoRight">
            运营正点率:
            <span>{{ pieChartPercent.zhengdianlv }}</span>
          </div>
        </div>

        <div class="pieChartContainer">
          <pie-chart
            :pieChartData="pieChartData"
            :id="pieChartId"
            :width="pieChartWidth"
            :height="pieChartHeight"
          />
        </div>
      </div>

      <!-- 数据 -->
      <div class="content">
        <div v-for="(e, index) in PublicColumnData" :key="index">
          <public-column :PublicColumnData="e" />
        </div>
      </div>

      <!-- 下拉菜单 -->
      <!-- <div class="dropDownSelectMenuContainer">
        <drop-down-select-menu />
      </div> -->
      <van-collapse v-model="activeNames">
        <van-collapse-item title="当日运营数据" names="1">
          <div v-for="(dayitem,index) in dayOperation" :key="index">
            <van-cell is-link :title="dayitem.title"></van-cell>
          </div>
        </van-collapse-item>
        <van-collapse-item title="次日运营数据" names="2">
          <div v-for="(nextitem,index) in nextDayOperation" :key="index" >
            <p><span>{{nextitem.names}}</span><span class="datas">{{nextitem.datas}}</span></p>
          </div>
        </van-collapse-item>
        <van-collapse-item title="更多统计数据" names="3">内容</van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>
<script>
import PublicHead from "../../../components/PublicHead";
import PieChart from "../../charts/PieChart.vue";
import PublicColumn from "../../../components/PublicColumn";
// import DropDownSelectMenu from '../../../components/DropDownSelectMenu'
export default {
  name: "operate",
  components: {
    PublicHead,
    PieChart,
    PublicColumn,
    // DropDownSelectMenu
  },
  data() {
    return {
			activeNames: ['1'],
      title: "运营日报",
      path: "operate",
      pieChartPercent: {
        duihuanlv: "98.70%",
        zhengdianlv: "98.50%",
      },
      pieChartId: "pieChart",
      pieChartWidth: "100%",
      pieChartHeight: "100%",
      pieChartData: [
        {
          name: "a",
          value: 10,
        },
        {
          name: "b",
          value: 20,
        },
        {
          name: "c",
          value: 40,
        },
        {
          name: "d",
          value: 30,
        },
      ],
      PublicColumnData: [
        [
          {
            title: "始发正点率",
            num: "100%",
            type: 0,
          },
          {
            title: "到达正点率",
            num: "95.3%",
            type: 1,
          },
          {
            title: "平均正点率",
            num: "97.6%",
            type: 2,
          },
        ],
        [
          {
            title: "停用",
            num: 1,
            type: 0,
          },
          {
            title: "加开",
            num: 0,
            type: 1,
          },
          {
            title: "回空",
            num: 1,
            type: 2,
          },
        ],
        [
          {
            title: "停用",
            num: 1,
            type: 0,
          },
          {
            title: "加开",
            num: 0,
            type: 1,
          },
          {
            title: "回空",
            num: 1,
            type: 2,
          },
        ],
        [
          {
            title: "运营公里",
            text:'(公里)',
            num: 1,
            type: 0,
          },
          {
            title: "走行公里",
            text:'(公里)',
            num: 0,
            type: 1,
          },
          {
            title: "轨道车公里",
            text:'(公里)',
            num: 1,
            type: 2,
          },
        ],
      ],
      dayOperation:[
        {title:"运营车"},
        {title:"段备车"},
        {title:"洗车/转线/调车"},
        {title:"调试车"},
        {title:"加开车"},
        {title:"回空车"},
        {title:"预备车"},
        {title:"月修"},
        {title:"定修"},
        {title:"架修"},
        {title:"厂修"},
        {title:"扣修"},
      ],
      nextDayOperation:[
        {names:"运营车（辆）",datas:"34899"},
        {names:"预备车（辆）",datas:"26.8"},
        {names:"段备车（辆）",datas:"1752.8"},
        {names:"月修车（辆）",datas:"0"},
        {names:"定修车（辆）",datas:"0"},
        {names:"架修车（辆）",datas:"0"},
        {names:"厂修车（辆）",datas:"0"},
      ],
    };
  },
  mounted() {

  },
  methods: {

  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.wrap{
    width 345px
    margin-left 15px
		.chooseBox{
			margin 10px 0
			width 100%
			background-color #fff
			display flex
			justify-content space-between
			font-size 15px
		}
    .pieChart{
      background-color #fff
      width 100%
      margin-bottom 10px
      box-sizing border-box
      padding 10px
      .pieChartInfo{
        background-color rgb(255,244,205)
        border-radius 8px
        width 90%
        margin 0 auto
        margin-bottom 10px
        display flex
        justify-content space-around
        font-size 13px
        line-height 44px
        height 44px
        .pieChartInfoLeft{
          color rgb(249,84,37)
        }
        .pieChartInfoRight{
          color rgb(25,138,255)
        }
      }
      .pieChartContainer{
        width 260px
        height 260px
        margin 0 auto
				padding-left 14px;
				box-sizing border-box;
      }
    }
  .dropDownSelectMenuContainer{
    width 100%
    min-height 150px
    background-color #fff
    border-radius 5px
    margin-top 10px
  }
	.van-collapse-item{
		margin-top 10px
	}
  .van-collapse{
        .van-collapse-item{
            margin-bottom  10px
            .van-cell--clickable {
                border-bottom 1px solid #e6e6e6
            }
            p{
                display flex
                justify-content space-between
                border-bottom 1px solid #ddd
                line-height 44px
                .datas{
                    color #333333
                }
                // p:first-child{
                //   .datas{
                //       color #14A3EB
                //   }
                // }
            }
        }
    }
}
</style>
